<template>
    <div class="sales">
        <dl>
            <dt>
                Publish your clothing, make<br /> sales,
                <strong>and let us take care</strong><br />
                <strong>of the rest.</strong>
            </dt>
            <dd>
                <p>Our integrations with multiple platforms allow you to quickly publish your custom clothing to your online stores and sell to the world with minimum effort. Leave all the hassle to us so you can focus on growing your business.<br />
                    <nuxt-link to="/document/how-work">Learn about how it works</nuxt-link>
                </p>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/home-sales-bg.png" alt="">
                    <img src="https://img.podpartner.com/static/images-20230202/home-sales.png" alt="">
                </figure>
            </dd>
        </dl>
    </div>
</template>
<script>
export default {
    name: "HomeSummarizeSales",
    props: {
        scroll: { type: Number, default: 0 }
    },
    data () {
        return {
            dom: {},
            clientHeight: 0,
            dtHeight: 0,
            ddHeight: 0
        }
    },
    watch: {
        scroll (v) {
            this.doAnimation()
        },

    },
    methods: {
        doAnimation () {
            let diff_scroll = Math.max(this.scroll - this.dtHeight, 0)
            const { sales } = this.dom;

            // let rate3 = this.getRate(scroll, [11, 11.8]);
            // let rate4 = this.getRate(scroll, [11.5, 12]);
            let rate1 = this.$getRate(diff_scroll, 0, 0.8, this.ddHeight)
            let rate2 = this.$getRate(diff_scroll, 0.5, 1, this.ddHeight)

            sales.style.setProperty('--salesImg1Count', rate1)
            sales.style.setProperty('--salesImg2Count', rate2)
        },
        getDoms () {
            let sales = document.querySelector('.sales');
            let dt = sales.querySelector('dt')
            let dd = sales.querySelector('dd')
            this.dom = { sales, dt };
            this.clientHeight = sales.clientHeight;
            this.dtHeight = dt.clientHeight
            this.ddHeight = dd.clientHeight
        }
    },
    mounted () {
        this.$on('global:homeResize', this.getDoms);
        this.getDoms();
    }
}
</script>
<style scoped lang="scss">
.sales {
    --salesTransCount: 1;
    --salesImg1Count: 1;
    --salesImg2Count: 1;
    z-index: 1;
    // height: 100vh;
    width: 100%;
    padding-top: 78px;
    // overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    dl {
        width: 986px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        dt {
            font-family: Roboto-Bold, Roboto;
            font-weight: 400;
            width: 986px;
            font-size: 64px;
            color: #ffffff;
            line-height: 78px;
            strong {
                width: 580px;
                font-size: 64px;
                color: #fbbc06;
                font-weight: inherit;
                line-height: 78px;
                background: linear-gradient(225deg, #edb002 0%, #e53bac 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        dd {
            width: 940px;
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            p {
                font-family: Roboto;
                width: 468px;
                font-size: 24px;
                font-weight: 400;
                color: #d9d9d9;
                line-height: 36px;
                & > a {
                    color: #a0a0a0;
                    text-decoration: underline;
                    &:hover {
                        color: #ea4c89;
                    }
                }
            }
            figure {
                width: 400px;
                height: 400px;
                position: relative;
                img {
                    @keyframes sales-img1 {
                        0% {
                            width: 0;
                            height: 0;
                        }
                        100% {
                            width: 280px;
                            height: 280px;
                        }
                    }
                    @keyframes sales-img2 {
                        0% {
                            width: 0;
                            height: 0;
                        }
                        100% {
                            width: 320px;
                            height: 344px;
                        }
                    }
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    &:nth-child(1) {
                        width: 128px;
                        height: 128px;
                        animation: sales-img1 linear 0s forwards;
                        animation-iteration-count: var(--salesImg1Count);
                    }
                    &:nth-child(2) {
                        width: 0;
                        height: 0;
                        animation: sales-img2 linear 0s forwards;
                        animation-iteration-count: var(--salesImg2Count);
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 960px) {
    .sales {
        padding: 48px 14px 80px;
        height: auto;
        margin-top: -1px;
        background: #000;
        animation: none;
        transform: none;
        position: relative;
        z-index: auto;
        * {
            animation: none;
            transform: none;
        }
        dl {
            width: 100%;
            max-width: 500px;
            dt {
                width: auto;
                font-size: 30px;
                line-height: 38px;
                margin-bottom: 14px;
                strong {
                    font-size: 30px;
                    line-height: 40px;
                }
                br {
                    display: none;
                }
            }
            dd {
                flex-direction: column;
                width: auto;
                p {
                    width: auto;
                    height: auto;
                    font-size: 16px;
                    line-height: 22px;
                    text-align: left;
                }
                figure {
                    margin-top: 30px;
                    width: 240px;
                    height: 258px;
                    img {
                        &:nth-child(1) {
                            animation: none;
                            width: 210px;
                            height: 210px;
                        }
                        &:nth-child(2) {
                            animation: none;
                            width: 240px;
                            height: 258px;
                        }
                    }
                }
            }
        }
    }
}
</style>
